<template>
  <div class="answer-select">
    <p v-if="!hasChoosed" class="tips">请从下面的选项中选择一个作为正确答案</p>
    <ul class="option-list">
      <li
        v-for="item in showedOptions"
        :key="item.mark"
        v-ri
        class="option-item mu-primary-color"
        :class="{ active: choosed === item.mark}"
        @click="choosed = item.mark"
      >
        <span>{{ item.mark }}</span>
        <span>. </span>
        <span>{{ item.text }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'AnswerSelect',
  props: {
    value: {
      type: String,
      required: true
    },
    options: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      choosed: 'A'
    }
  },
  computed: {
    showedOptions() {
      const options = []
      for (let i = 0; i < this.options.length; i++) {
        options.push({
          mark: String.fromCharCode(65 + i),
          text: this.options[i]
        })
      }
      return options
    },
    hasChoosed() {
      if (this.choosed.length !== 1) {
        return false
      } else {
        const code = this.choosed.charCodeAt(0)
        return code >= 65 && code < (65 + this.options.length)
      }
    }
  },
  watch: {
    value(val) {
      this.choosed = val
    },
    choosed(val) {
      this.$emit('input', val)
    }
  },
  created() {
    this.choosed = this.value
  }
}
</script>

<style scoped>
.tips {
  margin: 6px 0;
}
.option-list {
  margin: 0 auto;
  width: 512px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
}
.option-item {
  position: relative;
  margin: 3px 0;
  border-radius: 4px;
  padding: 16px;
  width: calc(50% - 3px);
  word-break: break-all;
  color: #fff;
  transition: background-color 0.4s;
}
.option-item.active {
  background-color: #81c784;
}

.is-phone .option-list {
  width: 100%;
}
</style>
